<template>
  <div>
    <div class="row">
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-info">
          <div class="inner">
            <h3 v-text="UserSize"></h3>
            <p>学生总人数</p>
          </div>
          <div class="icon">
            <i class="ion ion-bag"></i>
          </div>
          <a href="#" class="small-box-footer"
            >More info <i class="fas fa-arrow-circle-right"></i
          ></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-success">
          <div class="inner">
            <h3 v-text="fill"></h3>
            <p>已填报人数</p>
          </div>
          <div class="icon">
            <i class="ion ion-stats-bars"></i>
          </div>
          <a href="#" class="small-box-footer"
            >More info <i class="fas fa-arrow-circle-right"></i
          ></a>
        </div>
      </div>
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-danger">
          <div class="inner">
            <h3 v-text="hotTmp"></h3>
            <p>今日高危人数</p>
          </div>
          <div class="icon">
            <i class="ion ion-pie-graph"></i>
          </div>
          <a href="#/admin/HotTmp" class="small-box-footer"
            >More info <i class="fas fa-arrow-circle-right"></i
          ></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-warning">
          <div class="inner">
            <h3 v-text="gohubei"></h3>
            <p>今日经过高危地区人数</p>
          </div>
          <div class="icon">
            <i class="ion ion-person-add"></i>
          </div>
          <a href="#" class="small-box-footer"
            >More info <i class="fas fa-arrow-circle-right"></i
          ></a>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日汇报情况</span>
          </div>
          <ve-line :data="chartData3" height="20rem"></ve-line>
        </el-card>
      </div>
      <div class="col-lg-6">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>本月汇报情况</span>
          </div>
          <ve-line :data="chartData" height="20rem"></ve-line>
        </el-card>
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-lg-6">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日口罩情况</span>
          </div>
          <ve-pie :data="chartData1"> </ve-pie>
        </el-card>
      </div>
      <div class="col-lg-6">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日核酸检测</span>
          </div>
          <ve-pie :data="chartData2"> </ve-pie>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getHealthNowDayAPI, gethealthNowMonthAPI } from '../../request/students'
import { getStudentAPI } from '../../request/users'
export default {
  data() {
    return {
      UserSize: '',
      fill: '',
      hotTmp: '',
      gohubei: '',
      chartData1: {
        columns: ['类型', '访问用户'],
        rows: []
      },
      chartData2: {
        columns: ['类型', '访问用户'],
        rows: []
      },
      chartData: {
        columns: ['小时', '填报人数'],
        rows: []
      },
      chartData3: {
        columns: ['小时', '填报人数'],
        rows: []
      }
    }
  },
  created() {
    /**
     * 获取当天健康表信息
     */
    getHealthNowDayAPI({}).then(result => {
      console.log(result);
      for (let i = 0; i <= 31; i++) {
        this['tim' + i] = 0
      }
      this.fill = result.data.length;
      let i = 0;
      let j = 0;
      let maskNo = 0;
      let maskY = 0;
      let hesuanY = 0;
      let hesuanNo = 0;
      result.data.forEach((value, index) => {
        if (value.temperature <= 35 || value.temperature >= 38) i++
        if (value.gohubei == "是") j++

        let date = result.data[index].createtime;
        let newdate = new Date(date);
        let newdate2 = newdate.getHours();
        for (let i = 0; i <= 31; i++) {
          if (newdate2 == i) { this['tim' + i]++ };
        }
        if (result.data[index].mask == "是") {
          maskY++
        }
        if (result.data[index].mask == "否") {
          maskNo++
        }
        if (result.data[index].hesuan == "是") {
          hesuanY++
        }
        if (result.data[index].hesuan == "否") {
          hesuanNo++
        }
      });
      this.hotTmp = i;
      this.gohubei = j;
      for (let i = 0; i <= 31; i++) {
        this.chartData3.rows.push({ '小时': '0' + i, '填报人数': this['tim' + i] },)
      }
      this.chartData1.rows.push(
        { '类型': '口罩充足', '访问用户': maskY },
        { '类型': '口罩不充足', '访问用户': maskNo },
      );
      this.chartData2.rows.push(
        { '类型': '已核酸检测', '访问用户': hesuanY },
        { '类型': '未核酸检测', '访问用户': hesuanNo },
      )

    })
    // this.$Axios({
    //   url: "/students/gethealthNowDay",
    //   method: "get",
    //   data: {},
    //   success: (result) => {
    //     for (let i = 0; i <= 31; i++) {
    //       this['tim' + i] = 0
    //     }
    //     this.fill = result.length;
    //     let i = 0;
    //     let j = 0;
    //     let maskNo = 0;
    //     let maskY = 0;
    //     let hesuanY = 0;
    //     let hesuanNo = 0;
    //     result.forEach((value, index) => {
    //       if (value.temperature <= 35 || value.temperature >= 38) i++
    //       if (value.gohubei == "是") j++

    //       let date = result[index].createtime;
    //       let newdate = new Date(date);
    //       let newdate2 = newdate.getHours();
    //       for (let i = 0; i <= 31; i++) {
    //         if (newdate2 == i) { this['tim' + i]++ };
    //       }
    //       if (result[index].mask == "是") {
    //         maskY++
    //       }
    //       if (result[index].mask == "否") {
    //         maskNo++
    //       }
    //       if (result[index].hesuan == "是") {
    //         hesuanY++
    //       }
    //       if (result[index].hesuan == "否") {
    //         hesuanNo++
    //       }
    //     });
    //     this.hotTmp = i;
    //     this.gohubei = j;
    //     for (let i = 0; i <= 31; i++) {
    //       this.chartData3.rows.push({ '小时': '0' + i, '填报人数': this['tim' + i] },)
    //     }
    //     this.chartData1.rows.push(
    //       { '类型': '口罩充足', '访问用户': maskY },
    //       { '类型': '口罩不充足', '访问用户': maskNo },
    //     );
    //     this.chartData2.rows.push(
    //       { '类型': '已核酸检测', '访问用户': hesuanY },
    //       { '类型': '未核酸检测', '访问用户': hesuanNo },
    //     )
    //   }
    // });
    /**
     *根据用户类型进行用户信息获取(该方法主要用来获取总检测人数==>学生人数)
     */
    //   this.$axiosjwt({
    //   url: "/users/getUsersByTypePage",
    //   method: "get",
    //   data: {
    //     type: 2,
    //     currPage: 0,
    //     pageNum: 1
    //   },
    //   success: (result) => {
    //     this.UserSize = result.total
    //   }
    // })

    getStudentAPI({
      type: 2,
      currPage: 0,
      pageNum: 1
    }).then(result => {
      this.UserSize = result.data.total
    })


    // this.$axiosjwt({
    //   url: "/users/getUsersByTypePage",
    //   method: "get",
    //   data: {
    //     type: 2,
    //     currPage: 0,
    //     pageNum: 1
    //   },
    //   success: (result) => {
    //     this.UserSize = result.total
    //   }
    // })
    gethealthNowMonthAPI({
    }).then(result => {
      for (let i = 0; i <= 31; i++) {
        this['time' + i] = 0
      }
      result.data.forEach((value, index) => {
        let date = value.createtime;
        let newdate = new Date(date);
        let newdate1 = newdate.getDate();
        for (let i = 0; i <= 31; i++) {
          if (newdate1 == i) { this['time' + i]++ };
        }
      })
      for (let i = 0; i <= 31; i++) {
        this.chartData.rows.push({ '小时': '0' + i, '填报人数': this['time' + i] },)
      }
    })
    /**
     * 获取当月所有报表
     */
    // this.$Axios({
    //   url: "/students/gethealthNowMonth",
    //   method: "get",
    //   data: {},
    // success: (result) => {
    //   for (let i = 0; i <= 31; i++) {
    //     this['time' + i] = 0
    //   }
    //   result.forEach((value, index) => {
    //     let date = value.createtime;
    //     let newdate = new Date(date);
    //     let newdate1 = newdate.getDate();
    //     for (let i = 0; i <= 31; i++) {
    //       if (newdate1 == i) { this['time' + i]++ };
    //     }
    //   })
    //   for (let i = 0; i <= 31; i++) {
    //     this.chartData.rows.push({ '小时': '0' + i, '填报人数': this['time' + i] },)
    //   }
    // }
    // })
  },
}
</script>

<style scoped lang="scss">
</style>